<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>教学创新比赛</title>

	<link rel="stylesheet" href="dist/reset.css">
	<link rel="stylesheet" href="dist/reveal.css">
	<link rel="stylesheet" href="dist/theme/black.css">

	<!-- Theme used for syntax highlighted code -->
	<link rel="stylesheet" href="plugin/highlight/monokai.css">

	<!-- https://stackoverflow.com/questions/21019476/how-can-i-get-left-justified-paragraphs-in-reveal-js  -->
	<style type="text/css">
		p { text-align: left; }
	</style>

</head>
<body>

<div class="reveal">
<div class="slides">
<section data-markdown>
<textarea data-template>




## 基于版本控制工具的交互式编程教学实践

<img src="img/qrcode-chuangxin.png" class="center">

---
## 为什么创新 (1/2)

- 对于学习C++编程等侧重于动手实践的课程，除了必要的理论知识之外，应当在课堂上加强动手写代码的练习

- 不同学生在写代码的时候，往往在实现思路、变量命名、函数命名等方面存在过于多样化、不统一、不规范等缺点 &#128565;	
---
## 为什么创新 (2/2)

- 师生之间需要代码的交互，带动和规范学生的编程学习 &#x1F91D;	

- 学生可能不清楚自己的代码是否写对；若教师对每个学生进行反馈则耗时耗力
---
## 怎么创新 (1/2)
- 使用 Git 等代码版本管理工具
	- 学生在写代码的时候有统一的模板
	- 学生能随时跟上教师的代码进展
	- 更好地统一学生的写代码的思路，提升教学效果
---
## 怎么创新 (2/2)
- 使用在线代码托管平台（Gitee/GitHub）
	- 代码可以实时在网页端渲染
	- 利用持续集成、持续部署(CI/CD)给学生编写的代码进行自动评分
	- 学生可以获得即时的反馈，修改和完善代码
---
## 怎么实施的 (1/9)
- 课程进行到第一个知识点，e.g. ```cout```打印
- 教师在 IDE 输入如下代码（可以提前准备，也可以临场发挥）			

<pre><code data-line-numbers="1-5">int main() {
	// Write your code here
	// print "I love China" on the console

}
</code></pre>
- 教师在终端(或 IDE 自带的终端)输入命令行```git push```，代码即同步到了云端 &#x2197;	
---
## 怎么实施的 (2/9)
- 学生在终端(或 IDE 自带的终端)输入命令行```git pull```，代码即从云端同步到了本地 &#x2199;	
- 学生在教师的代码的基础上修改和完善代码			

<pre><code data-line-numbers="4">int main() {
	// Write your code here
	// print "I love China" on the console
	std::cout << "I love China" << std::endl;
}
</code></pre>
- [optional] 学生可以将自己的代码`git push`到 Gitee/GitHub 平台，教师可以实时去网页查看学生的代码
---
## 怎么实施的 (3/9)
- 课程进行到第二个知识点，e.g. 函数
- 教师在IDE输入如下代码(可以提前准备，也可以临场发挥)	

<pre><code data-line-numbers="1-10|2-3">int sum(int a, int b) {
	// Please fill in the blanks
	____ a + ____;
}

int main() {
	int a = 3, b = 4;
	int c = sum(a, b);
	std::cout << c << std::endl; // should print 7
}
</code></pre>
- 教师在终端(或 IDE 自带的终端)输入命令行```git push```，代码即同步到了云端 &#x2197;	
---
## 怎么实施的 (4/9)
- 学生在终端输入 ` git stash && git pull`，即可获取教师最新代码 &#x2199;	

- 学生在教师的代码的基础上修改和完善代码			

<pre><code data-line-numbers="2|3">int sum(int a, int b) {
	// Please fill in the blanks
	return a + b;
}

int main() {
	int a = 3, b = 4;
	int c = sum(a, b);
	std::cout << c << std::endl; // should print 7
}
</code></pre>
---
## 怎么实施的 (5/9)

- 教师的代码，在`git push`后，可以实时在代码托管平台（Gitee/GitHub）渲染
- 教师可以把各种信息（通知、要求、资料等），放在 `Readme.md` 文件，相当于一个上课专用的信息门户网站
- 一门课程，全程只需要一个仓库，减少管理成本、方便学生使用 &#x1F504;	
- https://gitee.com/lundechen/cpp
---
## 怎么实施的 (6/9)
- 一个仓库(repository)，可以有多个分支(branch)

- 每一个分支，可以对应一道习题，或者习题的答案

- `git checkout` 切换分支

- https://gitee.com/lundechen/cpp/branches

---
## 怎么实施的 (7/9)
- 学生的代码`git push`到 Gitee/GitHub 平台，触发CI/CD（持续集成，持续部署）, 进行代码评测
- 如果代码正确，则平台反馈 &#9989;
- 如果代码错误，则平台反馈 &#10060;
- [C++ 示例](cpp.html)
- [Java 示例](java.html)
- Python 示例: [老师](teacher.html)，[学生1](student1.html)，[学生2](student2.html)
---
## 怎么实施的 (8/9)
- Gitee Issues 作为提问/答疑平台 &#x2753;	
- https://gitee.com/lundechen/cpp/issues

<img src="img/issue-chuangxin.png" class="center" width="50%" height="50%">
---
## 怎么实施的 (9/9)
- &#x1F496;	为确保教学效果，精心录制了如下视频，对教学过程进行讲解	&#x1F447;	
	- &#x1F4FA;	[编程课程使用 Git-师生交互-简单场景](https://www.bilibili.com/video/BV1gu411Q7T3)
	- &#x1F4FA;	[学生如何将自己的代码 push 到 GitHub](https://www.bilibili.com/video/BV188411Y7Uf)
	- &#x1F4FA;	[CLion 和 Git 的安装](https://www.bilibili.com/video/BV1cq4y1S7Be)
	- &#x1F4FA;	[使用 Gitee Issues 提问](https://www.bilibili.com/video/BV1364y1h7sb)

---
## 创新特色是什么 (1/4)

- 很多教师、几乎所有信息行业从业者，都会使用 git/Gitee/GitHub &#x1F64B;	

- 本人在跟其他教师交流如何通过 git 来进行编程课程的交互的时候，很多教师都会“如梦初醒”，发现新大陆一般，这么自然而然的事情，自己怎么就没想到去做呢 &#128525;	
---
## 创新特色是什么 (2/4)
<img src="img/taolunjiaoshi.png" class="center" width="80%" height="80%">

---
## 创新特色是什么 (3/4)

- 学生不需要掌握任何的 git 基础

- 学生只需要使用 `git stash, git pull, git checkout` 就可以

- 学生浸润在 git/Gitee/GitHub 的文化氛围中，对版本管理会自然而然产生感觉。部分学生会主动学习更多相关知识，使用 git 进行团队代码协作

---
## 创新特色是什么 (4/4)

- 适用于几乎所有编程课程的教学 &#x1F4BB;	

- 适用于大部分需要使用代码的课程的教学 &#x2328;	

---
## 怎么评判本教学方法的创新性

- 上课效率是否提高 &#x1F199;	
	- 是的

- 学生是否更能学到课程核心知识 &#x1F4AF;	
	- 是的

- 教师的负担是否减轻 &#128540;
	- 是的 (surprise!)

---
## 效果如何 (1/3)

<img src="img/xiaoguo3.png" class="center" width="50%" height="50%">
---
## 效果如何 (2/3)


<img src="img/xiaoguo1.png" class="center" width="50%" height="50%">
---
## 效果如何 (3/3)

<img src="img/xiaoguo2.png" class="center" width="50%" height="50%">
---
## 谢谢各位评委老师！
<img src="img/qrcode-chuangxin.png" class="center">





</textarea>
</section>
</div>
</div>

	<script src="dist/reveal.js"></script>
	<script src="plugin/markdown/markdown.js"></script>
	<script src="plugin/highlight/highlight.js"></script>
	<script src="plugin/zoom/zoom.js"></script>
	<script>
		// More info about initialization & config:
		// - https://revealjs.com/initialization/
		// - https://revealjs.com/config/

		Reveal.initialize({
			hash: true,
			slideNumber: true,
			history: true,


			// Learn about plugins: https://revealjs.com/plugins/
			plugins: [ RevealMarkdown, RevealHighlight, RevealZoom]
		});

		Reveal.configure({
			keyboard: {
				27: () => { console.log('esc') }, // do something custom when ESC is pressed
				13: 'next' // go to the next slide when the ENTER key is pressed
			}
		});

	</script>
</body>
</html>
